
{extend name="layout"}
{block name="title"}我的{/block}

{block name="body"}
<div class="home-content home-user-content">

	<div class="home-head">
		<img src="__ROOT__/static/personal/images/avatar.png">
		<div class="head-box">
			<p>{$member.loginname|default=''}</p>
			{if $member.mobile eq true}
			<span>手机号：{$member.mobile|default=''}</span>
			{/if}
		</div>

		<div class="head-phone" onclick="bindPhone()">
			<span class="iconfont icon-shouji"></span>
			{if $member.mobile eq true}
			<p>修改手机号</p>
			{else/}
			<p>绑定手机号</p>
			{/if}
		</div>

	</div>

	<div class="user-index-card">

		<a href="{:url('personal/makeup/index')}">
			<img src="__ROOT__/static/personal/images/u01.png">
			<p> 补缴账单</p>
			{if isset($makeup) and ($makeup eq true)}
			<span class="pay-count">{$makeup|default='0'}</span>
			{/if}
			<span class="iconfont1 icon-xiangyou1"></span>
		</a>
		<a href="{:url('personal/increment/index')}">
			<img src="__ROOT__/static/personal/images/u02.png">
			<p> 增值账单</p>
			{if isset($appreciation) and ($appreciation eq true)}
			<span class="pay-count">{$appreciation|default='0'}</span>
			{/if}
			<span class="iconfont1 icon-xiangyou1"></span>
		</a>
		<a href="{:url('personal/user/services')}">
			<img src="__ROOT__/static/personal/images/u03.png">
			<p> 社保服务</p> <span class="iconfont1 icon-xiangyou1"></span>
		</a>
		<a href="{:url('personal/user/changepw')}">
			<img src="__ROOT__/static/personal/images/u04.png">
			<p> 修改密码</p> <span class="iconfont1 icon-xiangyou1"></span>
		</a>
		<a href="{:url('personal/user/aboutus')}">
			<img src="__ROOT__/static/personal/images/u05.png">
			<p> 关于我们</p> <span class="iconfont1 icon-xiangyou1"></span>
		</a>
	</div>




	<a class="logout" href='{:url("personal/login/logout")}'>退出登录
	</a>
	<div class="bind-phone" style="display: none">
		<img src="__ROOT__/static/personal/images/icon-phone.png">
		{if $member.mobile eq true}
		<p>修改手机号</p>
		{else/}
		<p>绑定手机号</p>
		{/if}
		<div class="form-phone" >
			<div class="input-box">
				<span>手机号</span>
				<input  autocomplete="off"  required pattern="^[\S]{4,}$" id="mobile" name="mobile"  autocomplete="off" placeholder="请输入手机号" style="border-radius: 0">

			</div>
			<div class="input-box">
				<span>验证码</span>
				<input autocomplete="off"  required pattern="^[\d]{4,}$" name="verify" maxlength="32" type="text" autocomplete="off" placeholder="请输入验证码">
				<div class="phone-code">
					<span>获取验证码</span>
				</div>

			</div>
		</div>
		<button onclick="submitBindCode()">确定</button>
	</div>
</div>

<div class="home-tab">
	<a href="{:url('personal/index/index')}">
		<span class="iconfont1 icon-shouye2 "></span>
		<span>首页</span>
	</a>

	<a href="{:url('personal/user/index')}">
		<span class="iconfont icon-shenfenzheng on"></span>
		<span>我的</span>
	</a>
</div>

{/block}
{block name="script"}
<script>
	$(document).ready(function(){
		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".phone-code").on("click","span",function(){
			var that = this
			if(phoneFlag){
				//检测手机号码
				var isCheck = checkPhone("mobile")
				if(!isCheck){
					return false
				}

				phoneFlag=false;



				// 发送验证码
				//个人 ：type 2;
				// verify_type:2(登录)    4（绑定手机号）
				$.ajax({
					url: '{:url("personal/login/send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":2,
						"verify_type":4
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg(res.info)
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	})
	var bindPhone = function(){

		var index = layer.open({
			type: 1,
			title: false,//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			area: '7.733rem',
			content: $('.bind-phone')
		});

	}
	var submitBindCode = function (){
		var verify = $("input[name='verify']").val()
		var mobile = $("input[name='mobile']").val()

		if(!mobile){
			layer.msg("请填写手机号");
			return
		}
		if(!verify){
			layer.msg("请填写验证码");
			return
		}


		$.ajax({
			url: '{:url("changemb")}',
			data: {
				"mobile":mobile,
				"verify":verify,
				"type":2,
				"verify_type":4
			},
			type: "post",
			success: function(res) {
				if(res.code==1){
					layer.msg(res.info);
					setTimeout(function (){
						layer.closeAll()
						window.location.replace("index.html")
					},500)
				}else{
					layer.msg(res.info);
				}


			},
			error: function() {
				layer.msg("绑定失败");
			}
		});
	}
	var addId = function (){
		window.location.href="idupload.html";
	}



</script>
{/block}
{block name="style"}
<style>
	body .layui-layer{
		border-radius: 0.267rem;
	}
	.home-content .logout{
		background-color:  #F4F4F4 ;
	}
</style>
{/block}
